<template>
  <div class="value">
    <div>
      <div class="valRow">
        <div class="valCol">
          <div class="table-box">
            <IconTitle title="设备总价值" imgUrl="yunwei">
            </IconTitle>
            <div class="echarts-box" style="height: 300px;">
              <el-table
                      :data="tableData"
                      border
                      :summary-method="getSummaries"
                      show-summary
                      :span-method="arraySpanMethod"
                      style="width: 100%">
                <el-table-column
                        type="index"
                        label="序号"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="设备名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="no"
                        label="设备编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="originVal"
                        label="原值">
                </el-table-column>
                <el-table-column
                        prop="value"
                        label="原值">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <div class="valCol">
          <div class="table-box">
            <IconTitle title="价值波动" imgUrl="yunwei">
            </IconTitle>
            <div class="echarts-box">
              <div style="height: 300px;">
                <el-steps direction="vertical" :active="1">
                  <el-step title="步骤 1" icon="el-icon-edit" description="22:22 [委外维修]  价值增加      + 2400"></el-step>
                  <el-step title="步骤 2" icon="el-icon-edit" description="22:22 [委外维修]  价值增加      + 2400"></el-step>
                  <el-step title="步骤 3" description="22:22 [委外维修]  价值增加      + 2400"></el-step>
                </el-steps>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="table-box">
      <IconTitle title="价值波动" imgUrl="yunwei">
      </IconTitle>
      <div class="echarts-box">
        <el-row :gutter="10">
          <el-col :span="24"
          >
            <div class="echarts-item echarts-item-classify ">
              <div id="price-echart" style="width: 100%;height:330px;"></div>
            </div>
          </el-col
          >
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import IconTitle from "@/components/icon-title/index.vue";

export default {
  name: "value",
  components: {
      IconTitle
  },

  data() {
    return {
        tableData: [{
            no: 'GW923700-12312',
            name: '聚脲喷涂机',
            originVal: 3000,
            value: 2000.3
        },{
            no: 'GW923700-12312',
            name: '聚脲喷涂机',
            originVal: 3000,
            value: 2000.3
        },{
            no: 'GW923700-12312',
            name: '聚脲喷涂机',
            originVal: 3000,
            value: 2000.3
        },{
            no: 'GW923700-12312',
            name: '聚脲喷涂机',
            originVal: 3000,
            value: 2000.3
        },{
            no: 'GW923700-12312',
            name: '聚脲喷涂机',
            originVal: 3000,
            value: 2000.3
        },]
    };
  },
  created() {
   
  },
  mounted() {
      this.positionEquipmentCountEchartFun()
  },
  methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        /*  console.log(row, column, rowIndex, columnIndex)
          if(rowIndex == 5 ){
              if (columnIndex === 0) {
                  return [1, 2];
              } else if (columnIndex === 1) {
                  return [0, 0];
              }
          }*/

      },
      getSummaries(param) {
          const { columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
              if (index === 0) {
                  sums[index] = '合计';
                  return
              }else if(index === 1){
                  return
              }
              if (index === 2 || index === 4) {
                  // sums[index] = '合计';
                  return
              }
              const values = data.map(item => Number(item[column.property]));
              if (!values.every(value => isNaN(value))) {
                  sums[index] = values.reduce((prev, curr) => {
                      const value = Number(curr);
                      if (!isNaN(value)) {
                          return prev + curr;
                      } else {
                          return prev;
                      }
                  }, 0);
                  sums[index] += '';
              } else {
                  sums[index] = 'N/A';
              }
          });

          return sums;
      },
      positionEquipmentCountEchartFun(){
          // 基于准备好的dom，初始化echarts实例
          var myChart = this.$echarts.init(document.getElementById('price-echart'));

          // 指定图表的配置项和数据
          var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                      type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                  }
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: ['2017-12-15', '2018-12-15', '2018-6-15', '2019-12-15', '2019-6-15', '2020-12-15', '2020-6-15','2021-12-15']
              },
              yAxis: {
                  type: 'value'
              },
              series: [
                  {
                      name: '折旧',
                      type: 'line',
                      stack: 'Total',
                      data: [120, 132, 101, 134, 90, 230, 210, 13],
                      itemStyle: {
                          color: "#76A6FC"
                      }
                  },
                  {
                      name: '采购',
                      type: 'line',
                      stack: 'Total',
                      data: [220, 182, 191, 234, 290, 330, 310, 13],
                      itemStyle: {
                          color: "#85D0DC"
                      }
                  }
              ]
          };

          // 使用刚指定的配置项和数据显示图表。
          option && myChart.setOption(option);
      },
  },
};
</script>
<style lang="scss" >
@import "@/styles/color.scss";
.value{
  .valRow{
    display: flex;
    justify-content: space-between;
    .valCol:nth-child(1){
      width: 73%;
    }
    .valCol:nth-child(2){
      width: 25%;
    }
  }
}

</style>
